<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模拟用户登录</title>
		<link rel="stylesheet" href="CSS/bootstrap.min.css" />
		<!-- 除引入第三方样式之外,还可以自定义样式,如与原样式冲突,则会覆盖原样式 -->
		<style>
			/* 限制网页宽度 */
			.container{
				width: 300px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h3>用户登录</h3>
			<!-- 展示区域,登录成功信息 -->
			<div id="msg" style="display: none;">123</div>
			<div class="form-group">
				<div class="form-group">
					<label>用户名</label>
					<input
						type="text"
						class="form-control"
						autocomplete="off"
						placeholder="请输入用户名"
						name="username" id="username"
					/>
				</div>
				<div class="form-group">
					<label>密码</label>
					<input
						type="password"
						class="form-control"
						placeholder="请输入密码"
						name="password"
						id="password"
					/>
				</div>
				<div class="form-group">
					<!-- 给按钮绑定onclick单击事件,写函数名,加() -->
					<button id="btnSubmit" onclick="doSubmit()" class="btn btn-success">登录</button>
					<button id="btnClear" onclick="doClear()" class="btn btn-danger">取消</button>
				</div>
			</div>
		</div>
	</body>
	<script>
		//定义doSubmit函数
		function doSubmit(){
			//获取用户名框的值
			var username=document.getElementById("username"); //代表了input用户名输入框
			//打印到控制台
			console.log(username.value); //值
			
			//获取密码
			var passward=document.getElementById("password");
			console.log(passward.value);
			
			//获取msg框,设置新值,展示msg框,设置新颜色:红色
			var msg=document.getElementById("msg");
			//注意:div和input获取值的语法不同
			msg.innerText=username.value+" <b>登录成功</b>";  //内部文字
			//msg.innerHTML=username.value+" <b>登录成功</b>"; //解析html标签
			//改变msg样式和颜色,设置style属性
			msg.style="display:block; color:white;background-color: green;margin: 10px;padding:10px;";
		}
		
		//清空输入框
		function doClear(){
			document.getElementById("username").value=''; //清空值,单引号字符串
			document.getElementById("password").value=""; //清空值,双引号字符串
		}
	</script>
</html>
